@extends('admin.master')

@section('style')
	<link rel="stylesheet" href="{{ url('css/bootstrap-datetimepicker.css') }}">
	<link rel="stylesheet" href="{{ url('js/prettyphoto/css/prettyPhoto.css') }}">
	<style>
		[v-cloak] { display: none }
	</style>
@endsection

@section('top')
<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render('order-create', $type) !!}</div>
@endsection

@section('content')
	<div class="container-body" id="view">
	{!! Form::open(['route' => 'admin.order.store', 'class'=>'form-horizontal']) !!}
		<input type="hidden" name="type" value="1">
		<input name="referer" type="hidden" value="{{ request()->header('referer') }}">
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">网站类型：</label>
			<div class="col-sm-8 row">
				<label class="radio-inline">
					<input type="radio" name="product" value="1" checked> 定制单
				</label>
				<label class="radio-inline">
					<input type="radio" name="product" value="2"> 架构站
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">业务员：</label>
			<div class="col-sm-8 row">
				{!! Form::hidden('saler_id', null, ['v-model'=>'saler']) !!}
				<div class="input-place len150" id="saler-select">
					<span class="filter-option pull-left" v-cloak>@{{ name ? name : '请选择业务员' }}</span>
					<span class="bs-caret"><span class="caret"></span></span>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">签单时间：</label>
			<div class="col-sm-8 row">
				<div class="input-append date form-datetime len150">
					{!! Form::text('signed_at', date('Y-m-d'), ['class'=>'form-control len150 datetimepicker-1', 'data-rule'=>'required;date;', 'data-date-format'=>'yyyy-mm-dd']) !!}
					<i class="icon icon-date"></i>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">实际开始时间：</label>
			<div class="col-sm-8 row">
				<div class="form-datetime len150">
					{!! Form::text('actualed_at', date('Y-m-d'), ['class'=>'form-control len150 datetimepicker-2', 'data-rule'=>'required;date;', 'data-date-format'=>'yyyy-mm-dd']) !!}
					<i class="icon icon-date"></i>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">服务年限：</label>
			<div class="col-sm-8 row">
				{!! Form::number('year', null, ['class'=>'form-control len150','data-rule'=>'required;integer(+0)']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">
				<span class="text-danger">*</span> <span>客户名称：</span>
			</label>
			<div class="col-sm-6 row">
				{!! Form::text('customer', null, ['class'=>'form-control len', 'id'=>'customer-name', 'data-rule'=>'required']) !!}
				<div class="checkbox input-right">
					<label>{!! Form::checkbox('expedited', 1) !!} <span>加急</span></label>
					<a href="javascript:;" class="customer-load">
						<i class="fa fa-refresh" aria-hidden="true"></i> 
						拉取客户数据
					</a>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">合同号：</label>
			<div class="col-sm-8 row">
				{!! Form::text('contract_no', null, ['class'=>'form-control len', 'placeholder'=>'请输入合同编号', 'readonly']) !!}
				<div class="contract-no-tip">
					<span class="contract-no-info">可用合同号：</span>
					<p class="contract-no-list label-list"></p>
				</div>
				<a href="javascript:;" class="order-contract-add"><i class="fa fa-plus" aria-hidden="true"></i> 添加合同</a>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">域名：</label>
			<div class="col-sm-8 row">
				<div class="input-group">
					<div class="input-group-addon">http://</div>
					{!! Form::text('domain', null, ['class'=>'form-control']) !!}
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">关键词：</label>
			<div class="col-sm-8 row">
				{!! Form::text('keywords', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 套餐：</label>
			<div class="col-sm-8 row">
				{!! Form::select('web_package', config('system.web_package'),  null, ['class'=>'form-control len', 'data-rule'=>'integer(+)', 'data-msg'=>'请选择套餐版本']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 语言版本：</label>
			<div class="col-sm-8 row">
				<div class="checkbox-wrap">
				@foreach ($languages as $key=>$value)
					<label class="checkbox-inline">
					  <input type="checkbox" name="languages[]" value="{{ $key }}" data-rule="checked(1~)"> {{ $value }}
					</label>
				@endforeach	
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">参考网站：</label>
			<div class="col-sm-8 row">
				{!! Form::text('reference_site', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">架构编号：</label>
			<div class="col-sm-8 row">
				{!! Form::text('web_number', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">联系人：</label>
			<div class="col-sm-8 row">
				{!! Form::text('contact_people', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">手机号：</label>
			<div class="col-sm-8 row">
				{!! Form::text('phone', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">座机：</label>
			<div class="col-sm-8 row">
				{!! Form::text('tel', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">传真：</label>
			<div class="col-sm-8 row">
				{!! Form::text('fax', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">邮箱：</label>
			<div class="col-sm-8 row">
				{!! Form::text('email', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 所在地区：</label>
			<div class="col-sm-8 row">
				<div class="block-inline" data-toggle="distpicker">
					<select name="city[province]" class="form-control" data-province="江苏省"></select>
					<select name="city[city]" class="form-control" data-city="苏州市"></select>
					<select name="city[district]" class="form-control" data-district="昆山市"></select>
				</div>
			</div>
		</div>		
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">详细地址：</label>
			<div class="col-sm-8 row">
				{!! Form::textarea('detail_address', null, ['class'=>'form-control len', 'rows'=>5, 'placeholder'=>'请您如实填写详细地址']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 总金额：</label>
			<div class="col-sm-8 row">
				{!! Form::text('amount', null, ['class'=>'form-control len', 'data-rule'=>'required']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 核算金额：</label>
			<div class="col-sm-8 row">
				{!! Form::text('real_amount', null, ['class'=>'form-control len', 'data-rule'=>'required']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">尾款：</label>
			<div class="col-sm-8 row">
				{!! Form::text('tail_amount', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">备注：</label>
			<div class="col-sm-8 row">
				{!! Form::textarea('remark', null, ['class'=>'form-control len500', 'rows'=>5]) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"></label>
			<div class="col-sm-8 row">
				{!! Form::submit('提交', ['class'=>'btn btn-primary btn-submit']) !!}
			</div>
		</div>
	{!! Form::close() !!}
	<!-- Modal -->
	<div class="modal fade" id="dialog-saler" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
	    <div class="modal-content">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
	            <h4 class="modal-title">选择业务员</h4>
	        </div>
	        <div class="modal-body clearfix">
	        	<input type="text" class="form-control" v-model="word" placeholder="输入业务姓名搜索">
				<div class='salers-list mt15'>
					<a href='javascript:;' v-bind:class="{ 'active': saler==$key }" data-id="@{{ item.id }}" v-for="item in users | filterBy word">
					  @{{ item.name }}
					</a>
				</div>
	        </div>
	    </div>
	  </div>
	</div>
	<!-- Modal End -->
<!-- Modal -->
<div class="modal fade" id="dialog-form-ajax" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body clearfix">
            
        </div>
        <div class="modal-footer">
            <a class="btn btn-primary btn-modal-ok">确定</a>
            <button class="btn btn-default btn-modal-cancel btn-modal-close" data-dismiss="modal">取消</button>
        </div>
    </div>
  </div>
</div>
<!-- Modal End -->
	</div>
@endsection

@section('foot')
<script src="{{ url('js/bootstrap-datetimepicker.js') }}"></script>
<script src="{{ url('js/distpicker/distpicker.data.min.js') }}"></script>
<script src="{{ url('js/distpicker/distpicker.js') }}"></script>
<script src="{{ url('js/nice-validator/jquery.validator.min.js?local=zh-CN') }}"></script>
<script src="{{ url('js/prettyphoto/jquery.prettyPhoto.js') }}"></script>
<script type="text/javascript">
    // 时间选择器
    $('.datetimepicker-1').datetimepicker({
    	language: 'zh-CN',
    	autoclose: true,
    	weekStart: 1,
    	minView: 'month'
    });	

    $('.datetimepicker-2').datetimepicker({
    	language: 'zh-CN',
    	autoclose: true,
    	weekStart: 1,
    	minView: 'month'
    }); 

 	var salerLoadUrl = "{{ url('admin/salers-ajax') }}";

	var vm = new Vue({
		el: '#view',
		data: {
			saler: 0,
			name: '',
			users: [],
		}
	});

	$.getJSON(salerLoadUrl, function(data) {
		vm.users = data;
	});

	// 选择业务员
	$('#saler-select').on('click', function() {
		$('#dialog-saler').modal('show');
		return false;
	});

	$('.modal-body').on('click', '.salers-list a', function() {
		vm.$set('saler', $(this).data('id'));
		vm.$set('name', $(this).text());

		$('#dialog-saler').modal('hide');
	});

    $('.lan-list').on('click', 'li', function(e) {
    	if ($(this).hasClass('active')) {
    		$(this).removeClass('active');
    	} else {
    		$(this).addClass('active');
    	}
    }); 

// 拉取客户信息
$('.customer-load').on('click', function() {
	var name = $('#customer-name').val();
	if (name == '') {
		swal("", "请输入客户名称", "error");
		$('#customer-name').focus();
		return false;
	}
	swal({
		title: '',
		text: '正在拉取客户信息',
		imageUrl: '/js/sweetalert/loading.gif',
		showConfirmButton: false,
	});
    $.ajax({
        type: "get",
        url: "/admin/customer/load-pull",
        data: "name=" + encodeURI(name),
        success: function(data) {
        	if (data == '') {
        		swal("", "拉取失败，没有找到该客户信息", "error");
        	} else {
        		var fields = ['domain', 'contact_people', 'phone', 'tel', 'fax', 'email', 'detail_address'];
        		var contracts = [];
        		$.each(fields, function(index, value) {
        			$(".form-control[name='"+value+"']").val(data[value]);
        		});

        		if (data.contracts) {
					$.each(data.contracts, function(key, value) {
						contracts.push('<a href="javascript:;"><span>'+value.contract_no+'</span></a>');
					});	
					$('.contract-no-list').html(contracts.join(''));
        		}
        		swal.close();
        	}
        	
        }
    });
});

$('.contract-no-list').on('click', 'a', function() {
	$("input[name='contract_no']").val($(this).find('span').text());
});


// 添加合同
var contractUrl = HOME_URL + '/admin/contract/create?pop=1';
$.get(contractUrl, function(data) {
	$('#dialog-form-ajax').find('.modal-body').html(data);
});
$('.order-contract-add').on('click', function(e) {
	e.preventDefault();
	$('#dialog-form-ajax').modal('show');
	return false;
});

// Ajax 提交表单
$('#dialog-form-ajax').on('click', '.btn-modal-ok', function() {
	var form = $(this).parents('.modal').find('form');
	form.trigger("validate");
});

$('#dialog-form-ajax').on('valid.form', function(e, form) {
	var url  = $(form).attr('action');
	$.ajax({
		type: "POST",
		url: url,
		data: $(form).serialize(),
		success: function(data) {
			if (data != '') {
				$("input[name='contract_no']").val(data);
			}
			$('#dialog-form-ajax').modal('hide');
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			if (XMLHttpRequest.status == 422) {
				swal("错误!", XMLHttpRequest.responseJSON.contract_no, "error");
				return false;	
			}
			swal("错误!", '服务器错误。', "error");	
			// console.log(JSON.stringify(XMLHttpRequest)); 
		}
	});
});
</script>	
@endsection